<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 账号权限 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button @click="adduser = true" type="primary" size="mini">添加角色</el-button>
            </div>
            <el-table :data="options" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="title" label="角色"></el-table-column>
                <el-table-column label="开通权限">
                    <template slot-scope="scope">
                        {{ scope.row.rules_title ? scope.row.rules_title : '暂无任何权限' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button @click="limits(scope.row.id, scope.row.title, scope.row.rules)" type="primary"
                                size="mini">权限</el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 设置权限弹框 -->
        <el-dialog title="开通权限" @close="cancel" :visible.sync="showLimitsDialog" width="600px">
            <el-form ref="ruleForm" :model="limitsForm" label-width="100px">
                <el-button type="success" size="mini">{{ role }}</el-button>
                <div class="limits-box">
                    <el-checkbox v-model="select_all" @change="select_all_limits" class="select_all">全选权限</el-checkbox>
                    <el-tree :data="limitsData" show-checkbox default-expand-all :default-checked-keys="limitsForm.rules"
                        :props="defaultProps" node-key="id" ref="tree">
                    </el-tree>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="添加角色" :visible.sync="adduser">
            <el-form :model="form">
                <el-form-item label="角色名称" label-width="100px">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="adduser = false">取 消</el-button>
                <el-button type="primary" @click="usersave">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getRoleMenu, setRoleAuthData, getRoleAuth, delEmplyee, addAuth } from '../../api/index';
export default {
    // name: 'suggest',
    data() {
        return {
            query: {},
            select_all: '',
            role: '',
            limitsForm: {
                id: '',
                rules: [],
                ruledata: []
            },
            options: [],
            limitsData: [],
            // children和label 与接口字段保持一致
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData: [],
            showLimitsDialog: false,
            pageTotal: 0,
            adduser: false,
            form: {}
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            getRoleAuth().then((res) => {
                // console.log(res);
                this.options = res.data;
                this.options.forEach(item=>{
                    item.rules_title = item.rules_title.join(',')
                })
            });

            // addXjMenu({data:JSON.stringify(this.limitsData)}).then((res)=>{
            //     if(res.code==1){
            //         console.log('成功获得菜单数据');
            //     }
            // });

            getRoleMenu().then((res) => {
                //console.log(res);
                let arr = JSON.parse(res.data.data);
                //arr.pop();
                this.limitsData = arr;
            })
        },
        limits(id, title, rules) {
            this.showLimitsDialog = true;
            this.limitsForm.id = id;
            this.role = title;
            this.limitsForm.rules = rules;
            setTimeout(() => {
                this.$nextTick(() => {
                    if (rules) {
                        this.$refs.tree.setCheckedKeys(rules);
                    } else {
                        this.$refs.tree.setCheckedKeys([]);
                    }
                });
            }, 100);
        },
        select_all_limits(v) {
            if (v == true) {
                this.$refs.tree.setCheckedNodes(this.limitsData);
                console.log(this.limitsData);
            } else {
                this.$refs.tree.setCheckedKeys([]);
            }
        },
        save() {
            this.limitsForm.rules = this.$refs.tree.getCheckedKeys();
            this.limitsForm.ruledatas = this.dealArray();
            setRoleAuthData(this.limitsForm).then((res) => {
                if (res.code == 1) {
                    this.showLimitsDialog = false;
                    this.$message.success('开通权限成功');
                    this.getData();
                    // setTimeout(() => {
                    //     location.reload();
                    // }, 200);
                }
            });
        },
        cancel() {
            this.showLimitsDialog = false;
        },
        dealArray() {
            const checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
            var checkedParam = [];
            let index = -1;
            if (checkedNodes.length !== 0) {
                checkedNodes.forEach((item) => {
                    // 父节点结构的情况
                    //console.log(item.children);
                    if (item.children !== undefined) { //有子元素
                        index++;
                        checkedParam[index] = {
                            icon: item.icon,
                            id: item.id,
                            index: item.index,
                            label: item.label,
                            title: item.title,
                            children: [],
                        };
                    } else { //没有子元素
                        let data = {
                            id: item.id,
                            index: item.index,
                            label: item.label,
                            title: item.title
                        }
                        if (checkedParam[index] !== undefined) {
                            checkedParam[index].children.push(data);
                        }
                        else {
                            index++;
                            checkedParam[index] = data;
                        }
                    }
                });
            }
            return checkedParam;
        },
        usersave() {
            this.form.shopId = localStorage.getItem('shopuuid');
            addAuth(this.form).then((res) => {
                if (res.code == 1) {
                    console.log(res)
                    this.adduser = false;
                    this.$message.success('创建成功，请添加权限');
                    this.getData();
                }
            });
            console.log(shop_id)
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    float: left;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.limits-box {
  margin: 30px 0 0 40px;
}

.select_all {
    margin-bottom: 20px;
}
</style>